<template>

  <div>
    <el-breadcrumb separator="/" style="margin-bottom: 20px">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统管理</el-breadcrumb-item>
      <el-breadcrumb-item>角色管理</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card class="box-card">
      <!-- 上面工具栏 -->
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input
            clearable
            placeholder="请输入角色名查询"
            v-model="queryMap.roleName"
            class="input-with-select"
          >
            <el-button slot="append" icon="el-icon-search" @click="query" ></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button
            type="success"
            icon="el-icon-circle-plus-outline"
            @click="addDialogVisible=true"
          >添加</el-button>
          <el-button type="warning" icon="el-icon-download" @click="exportExcel">导出</el-button>
        </el-col>
      </el-row>
      <!-- 表格区域 -->
      <template>
        <el-table

          :data="roleData"
          border
          style="width: 100%;margin-top:20px;"
          height="460"
        >
          <el-table-column prop="id" label="ID" width="180"></el-table-column>
          <el-table-column prop="roleName" label="角色名" width="180"></el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="150"></el-table-column>
          <el-table-column prop="status" label="是否禁用" width="100">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.status==0"
                         active-color="#ff4949"
                         inactive-color="#13ce66"
                         @change="alterState(scope.row)"></el-switch>
            </template>
          </el-table-column>
          <el-table-column prop="remark" label="备注"></el-table-column>
          <el-table-column fixed="right" label="操作" width="200">
            <template slot-scope="scope">
              <el-button
                @click="grantDialogVisible = true"
                type="text"
                icon="el-icon-present"
                size="small"
              >授权</el-button>
              <el-button @click="compile(scope.row.id)" type="text" icon="el-icon-edit" size="small">编辑</el-button>
              <el-button
                type="text"
                icon="el-icon-delete"
                size="small"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <!-- 分页部分 -->
      <el-pagination
        background
        style="margin-top:10px;"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryMap.pageNum"
        :page-sizes="[7, 16, 32, 64]"
        :page-size="queryMap.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
      <!-- 添加弹框 -->
      <roles-compile :add-dialog-visible="addDialogVisible" :role-id="roleId" @changeShow="showAddOrUpdate" />


      <!-- 角色授权弹出框 -->
      <el-dialog title="分配菜单权限" :visible.sync="grantDialogVisible" width="38%">
        <span>
          <el-tree
            :auto-expand-parent="false"
            :data="data"
            show-checkbox
            node-key="id"
            :default-expanded-keys="open"
            :props="defaultProps"
            ref="tree"
            highlight-current
          ></el-tree>
          <!-- check-strictly -->
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="grantDialogVisible = false">取 消</el-button>
          <el-button
            type="primary"
            icon="el-icon-setting"
            :loading="btnLoading"
            :disabled="btnDisabled"
          >授 权</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>

</template>

<script>
  import {findByName, editRoleState,exportRoleInfo} from '../../api/role'
  import RolesCompile from "../../components/system/RolesCompile";

    export default {
        name: "Roles",
        components: {
            RolesCompile
        },
        data() {
            return {
                btnLoading: false,
                btnDisabled: false,
                loading: true,
                total: 0,
                queryMap: {roleName: "", pageNum: 1, pageSize: 7}, //查询条件
                roleData: [
                    {
                        createTime: "2019-11-22",
                        id: 126,
                        modifiedTime: "2019-11-22T07:57:08.000+0000",
                        remark: "美国校队队长",
                        roleName: "蔡徐坤",
                        status: false
                    }
                ], //角色表格数据
                addDialogVisible: false,
                roleId: null,
                // addForm: {}, //添加数据
                // editForm: {}, //编辑数据
                // addDialogVisible: false, //添加弹框的显示
                // editDialogVisible: false, //编辑弹框
                grantDialogVisible: false, //授权弹出框
                data: [
                    {
                        "id": 1,
                        "parentId": 0,
                        "menuName": "系统管理",
                        "url": "",
                        "icon": "el-icon-setting",
                        "orderNum": 1,
                        "open": 1,
                        "disabled": false,
                        "perms": null,
                        "type": 0,
                        "children": [
                            {
                                "id": 253,
                                "parentId": 1,
                                "menuName": "欢迎页面",
                                "url": "/welcome",
                                "icon": "el-icon-star-off",
                                "orderNum": 1,
                                "open": 0,
                                "disabled": false,
                                "perms": "welcome:view",
                                "type": 0,
                                "children": []
                            },
                            {
                                "id": 226,
                                "parentId": 1,
                                "menuName": "用户管理",
                                "url": "/users",
                                "icon": "el-icon-user",
                                "orderNum": 2,
                                "open": 0,
                                "disabled": false,
                                "perms": "users",
                                "type": 0,
                                "children": []
                            },
                            {
                                "id": 321,
                                "parentId": 1,
                                "menuName": "附件管理",
                                "url": "/attachments",
                                "icon": "el-icon-picture-outline",
                                "orderNum": 2,
                                "open": 1,
                                "disabled": false,
                                "perms": "",
                                "type": 0,
                                "children": []
                            },
                            {
                                "id": 4,
                                "parentId": 1,
                                "menuName": "菜单权限",
                                "url": "/menus",
                                "icon": "el-icon-help",
                                "orderNum": 3,
                                "open": 0,
                                "disabled": false,
                                "perms": null,
                                "type": 0,
                                "children": []
                            },
                            {
                                "id": 235,
                                "parentId": 1,
                                "menuName": "角色管理",
                                "url": "/roles",
                                "icon": "el-icon-postcard",
                                "orderNum": 3,
                                "open": 0,
                                "disabled": false,
                                "perms": "",
                                "type": 0,
                                "children": []
                            },
                            {
                                "id": 261,
                                "parentId": 1,
                                "menuName": "部门管理",
                                "url": "/departments",
                                "icon": "el-icon-s-home",
                                "orderNum": 3,
                                "open": 0,
                                "disabled": false,
                                "perms": "",
                                "type": 0,
                                "children": []
                            },
                            {
                                "id": 319,
                                "parentId": 1,
                                "menuName": "公告管理",
                                "url": "/notices",
                                "icon": "el-icon-s-flag",
                                "orderNum": 4,
                                "open": 0,
                                "disabled": true,
                                "perms": "",
                                "type": 0,
                                "children": []
                            }
                        ]
                    },
                    {
                        "id": 312,
                        "parentId": 0,
                        "menuName": "业务管理",
                        "url": null,
                        "icon": "el-icon-s-goods",
                        "orderNum": 2,
                        "open": 0,
                        "disabled": false,
                        "perms": null,
                        "type": 0,
                        "children": [
                            {
                                "id": 229,
                                "parentId": 312,
                                "menuName": "物资管理",
                                "url": "",
                                "icon": "el-icon-date",
                                "orderNum": 1,
                                "open": 1,
                                "disabled": false,
                                "perms": "el-icon-date",
                                "type": 0,
                                "children": [
                                    {
                                        "id": 230,
                                        "parentId": 229,
                                        "menuName": "物资入库",
                                        "url": "/inStocks",
                                        "icon": "el-icon-date",
                                        "orderNum": 1,
                                        "open": 1,
                                        "disabled": false,
                                        "perms": "el-icon-date",
                                        "type": 0,
                                        "children": []
                                    },
                                    {
                                        "id": 267,
                                        "parentId": 229,
                                        "menuName": "物资资料",
                                        "url": "/products",
                                        "icon": "el-icon-goods",
                                        "orderNum": 2,
                                        "open": 0,
                                        "disabled": false,
                                        "perms": "",
                                        "type": 0,
                                        "children": []
                                    },
                                    {
                                        "id": 268,
                                        "parentId": 229,
                                        "menuName": "物资类别",
                                        "url": "/productCategorys",
                                        "icon": "el-icon-star-off",
                                        "orderNum": 2,
                                        "open": 0,
                                        "disabled": false,
                                        "perms": "",
                                        "type": 0,
                                        "children": []
                                    },
                                    {
                                        "id": 270,
                                        "parentId": 229,
                                        "menuName": "物资发放",
                                        "url": "/outStocks",
                                        "icon": "el-icon-goods",
                                        "orderNum": 5,
                                        "open": 1,
                                        "disabled": false,
                                        "perms": "",
                                        "type": 0,
                                        "children": []
                                    },
                                    {
                                        "id": 316,
                                        "parentId": 229,
                                        "menuName": "物资库存",
                                        "url": "/stocks",
                                        "icon": "el-icon-tickets",
                                        "orderNum": 5,
                                        "open": 0,
                                        "disabled": false,
                                        "perms": "",
                                        "type": 0,
                                        "children": []
                                    }
                                ]
                            },
                            {
                                "id": 311,
                                "parentId": 312,
                                "menuName": "物资流向",
                                "url": null,
                                "icon": "el-icon-edit",
                                "orderNum": 3,
                                "open": 0,
                                "disabled": false,
                                "perms": null,
                                "type": 0,
                                "children": [
                                    {
                                        "id": 310,
                                        "parentId": 311,
                                        "menuName": "物资去处",
                                        "url": "/consumers",
                                        "icon": "el-icon-edit",
                                        "orderNum": 1,
                                        "open": 0,
                                        "disabled": false,
                                        "perms": "",
                                        "type": 0,
                                        "children": []
                                    },
                                    {
                                        "id": 269,
                                        "parentId": 311,
                                        "menuName": "物资来源",
                                        "url": "/suppliers",
                                        "icon": "el-icon-coordinate",
                                        "orderNum": 5,
                                        "open": 0,
                                        "disabled": false,
                                        "perms": "",
                                        "type": 0,
                                        "children": []
                                    }
                                ]
                            }
                        ]
                    },
                    {
                        "id": 303,
                        "parentId": 0,
                        "menuName": "健康报备",
                        "url": "",
                        "icon": "el-icon-platform-eleme",
                        "orderNum": 3,
                        "open": 0,
                        "disabled": false,
                        "perms": "",
                        "type": 0,
                        "children": [
                            {
                                "id": 273,
                                "parentId": 303,
                                "menuName": "全国疫情",
                                "url": "/map",
                                "icon": "el-icon-s-opportunity",
                                "orderNum": 1,
                                "open": 1,
                                "disabled": false,
                                "perms": "map:view",
                                "type": 0,
                                "children": []
                            },
                            {
                                "id": 304,
                                "parentId": 303,
                                "menuName": "健康打卡",
                                "url": "/health",
                                "icon": "el-icon-s-cooperation",
                                "orderNum": 1,
                                "open": 0,
                                "disabled": false,
                                "perms": "",
                                "type": 0,
                                "children": []
                            },
                            {
                                "id": 305,
                                "parentId": 303,
                                "menuName": "查看情况",
                                "url": null,
                                "icon": "el-icon-c-scale-to-original",
                                "orderNum": 2,
                                "open": 1,
                                "disabled": false,
                                "perms": null,
                                "type": 0,
                                "children": []
                            },
                            {
                                "id": 272,
                                "parentId": 303,
                                "menuName": "疫情辟谣",
                                "url": "/rumors",
                                "icon": "el-icon-help",
                                "orderNum": 5,
                                "open": 0,
                                "disabled": false,
                                "perms": null,
                                "type": 0,
                                "children": []
                            }
                        ]
                    },
                    {
                        "id": 295,
                        "parentId": 0,
                        "menuName": "其他管理",
                        "url": "",
                        "icon": "el-icon-s-marketing",
                        "orderNum": 5,
                        "open": 0,
                        "disabled": false,
                        "perms": "",
                        "type": 0,
                        "children": [
                            {
                                "id": 297,
                                "parentId": 295,
                                "menuName": "监控管理",
                                "url": "",
                                "icon": "el-icon-warning",
                                "orderNum": 1,
                                "open": 0,
                                "disabled": false,
                                "perms": "",
                                "type": 0,
                                "children": [
                                    {
                                        "id": 298,
                                        "parentId": 297,
                                        "menuName": "SQL监控",
                                        "url": "/druid",
                                        "icon": "el-icon-view",
                                        "orderNum": 1,
                                        "open": 0,
                                        "disabled": false,
                                        "perms": null,
                                        "type": 0,
                                        "children": []
                                    }
                                ]
                            },
                            {
                                "id": 341,
                                "parentId": 295,
                                "menuName": "个人博客",
                                "url": "/blog",
                                "icon": "el-icon-view",
                                "orderNum": 1,
                                "open": 0,
                                "disabled": false,
                                "perms": "",
                                "type": 0,
                                "children": []
                            },
                            {
                                "id": 296,
                                "parentId": 295,
                                "menuName": "swagger文档",
                                "url": "/swagger",
                                "icon": "el-icon-document",
                                "orderNum": 2,
                                "open": 0,
                                "disabled": false,
                                "perms": null,
                                "type": 0,
                                "children": []
                            },
                            {
                                "id": 318,
                                "parentId": 295,
                                "menuName": "图标管理",
                                "url": "/icons",
                                "icon": "el-icon-star-off",
                                "orderNum": 2,
                                "open": 1,
                                "disabled": false,
                                "perms": "",
                                "type": 0,
                                "children": []
                            }
                        ]
                    },
                    {
                        "id": 5,
                        "parentId": 0,
                        "menuName": "日志管理",
                        "url": "/logs",
                        "icon": "el-icon-camera",
                        "orderNum": 6,
                        "open": 0,
                        "disabled": false,
                        "perms": null,
                        "type": 0,
                        "children": [
                            {
                                "id": 271,
                                "parentId": 5,
                                "menuName": "登入日志",
                                "url": "/loginLog",
                                "icon": "el-icon-date",
                                "orderNum": 1,
                                "open": 0,
                                "disabled": false,
                                "perms": "login:log",
                                "type": 0,
                                "children": []
                            },
                            {
                                "id": 307,
                                "parentId": 5,
                                "menuName": "操作日志",
                                "url": "/logs",
                                "icon": "el-icon-edit",
                                "orderNum": 1,
                                "open": 1,
                                "disabled": false,
                                "perms": "",
                                "type": 0,
                                "children": []
                            }
                        ]
                    }
                ],
                open: [1, 229, 230, 270, 273, 281, 282, 305, 307, 308, 318, 320, 321, 322, 325, 326, 332, 337], //展开
                grantId: "",
                defaultProps: {
                    children: "children",
                    label: "menuName"
                },
                // addFormRoles: {
                //     roleName: [
                //         {required: true, message: "请输入角色名称", trigger: "blur"},
                //         {min: 3, max: 10, message: "长度在 3 到 10 个字符", trigger: "blur"}
                //     ],
                //     remark: [
                //         {required: true, message: "请输入角色描述信息", trigger: "blur"},
                //         {min: 5, max: 20, message: "长度在 5 到 20 个字符", trigger: "blur"}
                //     ]
                // } //添加验证规则
            };
        },
        methods: {
            //改变页码
            handleSizeChange(newSize) {
                this.queryMap.pageSize = newSize;
                this.getRoleAll()
            },
            //翻页
            handleCurrentChange(current) {
                this.queryMap.pageNum = current;
                this.getRoleAll()
            },
            //查询
            async getRoleAll() {
                const {data} = await findByName(this.queryMap.roleName
                    , this.queryMap.pageNum
                    , this.queryMap.pageSize)
                this.roleData = data.data.roles.records
                this.total = data.data.roles.total
                // console.log(data.data.roles)
            },
            // 监听 子组件弹窗关闭后触发，有子组件调用
            showAddOrUpdate(data) {
                if (data === 'false') {
                    this.addDialogVisible = false
                    this.roleId = null
                    this.getRoleAll()
                } else {
                    this.addDialogVisible = true
                }
            },
            // 编辑
            compile(id) {
                this.roleId = id;
                this.addDialogVisible = true;
            },
            // 查询
            query() {
                this.queryMap.pageNum = 1;
                this.getRoleAll()
            },
            // 改变状态
            async alterState(row) {
                const {data} = await editRoleState(row.id);
                if (data.code == 200) {
                    var message = row.status ? '角色状态已禁用' : '角色状态已启用';
                    this.$notify({
                        title: '成功',
                        message: message,
                        type: 'success'
                    });
                }
                this.getRoleAll()
            },
            // 导出
            async exportExcel() {
                exportRoleInfo(this.userVo).then(res => {
                    //这里没有返回数据,但是要在响应头中进行下载操作
                    // 将二进制文件转化为可访问的url
                    let url = window.URL.createObjectURL(new Blob([res.data]));

                    //创建了一个a标签的超链接
                    var a = document.createElement("a");
                    //将a标签添加到body内容中
                    document.body.appendChild(a);
                    a.href = url;
                    a.download = "角色列表.xlsx";
                    a.click();
                    window.URL.revokeObjectURL(url);
                }).catch(err => {

                })
            },
        },
        created() {
            this.getRoleAll()
        }
    }
</script>

<style scoped>

</style>
